<template>
	<div ref="myTreeTable">
		<div class="flex m-between m-h-500" style="height: 50vh">
			<div style="width: 28%" class="flex-col">
				<my-input v-model="filType" placeholder="请输入">
					<template #append>
						<el-button
							icon="Search"
							@click="
								filType = '';
								queryParams[treeKey] = '';
								refTable.reload();
							"
						/>
					</template>
				</my-input>
				<div class="flex-auto overflow-auto m-t-10">
					<my-panel shadow="always" fit :title="treeTitle" size="medium" theme="bg-right" icon="Menu">
						<el-tree
							ref="refTree"
							:expand-on-click-node="false"
							:filter-node-method="filterNode"
							highlight-current
							default-expand-all
							v-bind="tree"
							@node-click="handleNodeClick"
						/>
					</my-panel>
				</div>
			</div>
			<div class="border flex-col f1 w0 m-l-10">
				<div class="p-10 system-page-background b-radius-4">
					<my-form inline query :model="queryParams" :form-item="formItem" :search-fn="() => refTable.reload()" />
				</div>
				<!-- 表格部分 -->
				<my-list-panel ref="refTable" :total="state.total" :load-fn="loadData">
					<my-table ref="myTableRef" :data="state.list" :columns="columns" @select="handleSelectionChange" @select-all="handleSelectionAllChange">
						<!-- 使用组装好的Slots -->
						<template v-for="(slotKey, slotIndex) in Object.keys($slots)" :key="slotIndex" #[slotKey]="scope">
							<slot :name="slotKey" v-bind="scope">{{ slotKey }}</slot>
						</template>
					</my-table>
				</my-list-panel>
			</div>
		</div>
		<slot name="footer">
			<div class="tr m-t-10">
				<el-button @click.prevent="$emit('close')">取 消</el-button>
				<el-button type="primary" @click.prevent="subFn()">确 定 {{ tableSelection.length }} 项</el-button>
			</div>
		</slot>
	</div>
</template>

<script setup name="MyTreeTable">
import { SpreadPage } from '@u/mixin';

// dom元素
const $emit = defineEmits(['determine', 'close']),
	refTree = shallowRef(null),
	refTable = shallowRef(null),
	/**
	 * 该组件所有props都为必填
	 * @param {Function} pageApi 右边表格的分页接口
	 * @param {Object} tree 左边树形tree的配置属性对象
	 * @param {String} treeKey 左边树形tree的key值，传给后台查询的字段名
	 * @param {String} treeTitle 左边树形tree的title
	 * @param {Array} formItem 右边表格的查询条件
	 * @param {Array} columns 表格的columns配置数据
	 */
	props = defineProps({
		pageApi: {
			type: Function,
			required: true
		},
		tree: {
			type: Object,
			required: true,
			default: () => ({
				data: [],
				props: { children: 'children', label: 'name' },
				nodeKey: 'id'
			})
		},
		treeKey: {
			type: String,
			required: true
		},
		treeTitle: {
			type: String,
			default: '分类'
		},
		formItem: {
			type: Array,
			required: true
		},
		columns: {
			type: Array,
			required: true
		}
	});

const {
	queryParams,
	state,
	myTable: myTableRef,
	tableSelection,
	loadData,
	handleSelectionChange,
	handleSelectionAllChange
} = SpreadPage({
	api: { page: props.pageApi }
});

// 左边tree逻辑部分
const filType = ref('');
watch(filType, (val) => refTree.value.filter(val));

function handleNodeClick(data) {
	unref(queryParams)[props.treeKey] = data[props.tree.nodeKey];
	refTable.value.reload();
}
function filterNode(val, data) {
	if (!val) return true;
	return data[props.tree.props.label].includes(val);
}

// 确认逻辑
function subFn() {
	$emit('determine', [...tableSelection.value]);
	$emit('close');
}
</script>

<style lang="scss" scoped>
.border {
	border: 1px solid var(--el-border-color);
	border-radius: var(--el-border-radius-base);
}
</style>
